<template>
	<!--index.wxml-->
	<view class="index-outer-wrapper">
		<!-- 骨架屏 -->
		<view class="screen-wrapper" v-if="showScreen">
			<view class="screen-bg-sear"></view>
			<view class="screen-swiper"></view>
			<view class="screen-cat-item">
				<view class="item" v-for="item in 5"></view>
			</view>
			<view class="screen-more" v-for="item in 4"></view>
		</view>
		<!-- 骨架屏 end -->

		<view class="container" v-if="!renovationId">
			<!-- 搜索框 -->
			<view class="bg-sear">
				<view class="scrolltop">
					<view class="section" @tap="toSearchPage">
						<image src="/static/images/icon/search.png" class="search-img"></image>
						<text class="placeholder">{{i18n.search}}</text>
					</view>
				</view>
			</view>
			<!-- 搜索框end -->

			<!-- 导航&公告 -->
			<view class="content-wrapper">
				<!-- swiper -->
				<swiper class="swiper-wrapper pic-swiper" circular="true" :autoplay="autoplay"
					:indicator-color="indicatorColor" :interval="interval" :duration="duration"
					:indicator-active-color="indicatorActiveColor" indicator-dots previous-margin="20rpx"
					next-margin="20rpx">
					<block v-for="(item, seq) in indexImgs" :key="seq">
						<swiper-item class="banner-item">
							<view class="img-box" @tap="toProdPage" :data-prodid="item.prodId">
								<image :src="item.imgUrl" class="banner"></image>
							</view>
						</swiper-item>
					</block>
				</swiper>
				<!-- end swiper -->
				<!-- 板块 -->
				<view class="cat-item">
					<view class="item" @tap="toClassifyPage" data-sts="1">
						<image src="/static/images/icon/newProd.png"></image>
						<text>{{i18n.newProduct}}</text>
					</view>
					<view class="item" @tap="toSpecialDiscount" data-sts="2">
						<image src="/static/images/icon/timePrice.png"></image>
						<text>{{i18n.limitedTimeOffer}}</text>
					</view>
					<!-- 优惠团购 -->
					<view class="item" @tap="toAbulkPage">
						<image src="/static/images/icon/group.png"></image>
						<text>{{i18n.groupDiscount}}</text>
					</view>

					<view class="item" @tap="toSecKillPage" data-sts="3">
						<image src="/static/images/icon/neweveryday.png"></image>
						<text>{{i18n.spikeSpecial}}</text>
					</view>
					<view class="item" @tap="toCoordinaPage">
						<image src="/static/images/icon/group.png"></image>
						<text>协同采购</text>
					</view>
					<!-- <view class="item" @tap="toCouponCenter">
						<image src="/static/images/icon/newprods.png"></image>
						<text>{{i18n.couponCenter}}</text>
					</view> -->
				</view>
			</view>
			<!-- 导航&公告end -->

			<!-- 直播列表入口 -->
			<!-- #ifdef MP-WEIXIN -->
			<!-- <view class="live-enter" @tap="toLiveListPage">
			<image :src="pictureDomain+'live-enter.png'"></image>
			</view>	 -->
			<!-- #endif -->

			<!-- 秒杀 -->
			<view class="snap-up clearfix" v-if="snapUpList.length">
				<!-- 头部 -->
				<view class="snap-up-head clearfix">
					<text class="snap-up-tit">{{i18n.spike}}</text>
					<!-- 倒计时 -->
					<!-- <view class="snap-up-time">
					<text class="white">12点场</text>
					<text class="snap-up-countdown">00:14:53</text>
				</view> -->
					<!-- 更多 -->
					<view class="more-goods" @tap="toSnapUpPage">
						<text class="more-goods-txt">{{i18n.moreSpikes}}</text>
						<view class="more-icon">
							<image src="/static/images/icon/more.png"></image>
						</view>
					</view>
				</view>

				<!-- 列表 -->
				<view class="snap-up-goods-show">
					<!-- 商品盒子 -->
					<view class="snap-up-goods-box" v-for="(item, index) in snapUpList" :key="index"
						@tap="toSnapUpListPage" :data-seckillid="item.seckillId">
						<view class="img-box">
							<image :src="item.pic"></image>
						</view>
						<view class="snap-up-price"><text class="symbol">￥</text>{{wxs.toPrice(item.seckillPrice)}}
						</view>
						<view class="original-price">￥{{wxs.toPrice(item.price)}}</view>
					</view>
					<!-- 查看更多 -->
					<view class="view-more" @tap="toSnapUpPage" v-if="snapUpList.length > 3">{{i18n.seeMore}}
						<image class="view-more-icon" src="/static/images/icon/more-icon.png"></image>
					</view>
				</view>

			</view>
			<!-- 秒杀end -->

			<!-- 团购 -->
			<view class="abulk clearfix" v-if="aBulkList.length">
				<!-- 头部 -->
				<view class="snap-up-head clearfix">
					<text class="snap-up-tit">{{i18n.groupBuy}}</text>
					<!-- 倒计时 -->
					<!-- <view class="snap-up-time">
					<text class="white">12点场</text>
					<text class="snap-up-countdown">00:14:53</text>
				</view> -->
					<!-- 更多 -->
					<view class="more-goods" @tap="toAbulkPage">
						<text class="more-goods-txt">{{i18n.moreGroupBuy}}</text>
						<view class="more-icon">
							<image src="/static/images/icon/more.png"></image>
						</view>
					</view>
				</view>

				<!-- 列表 -->
				<view class="snap-up-goods-show">
					<!-- 商品盒子 -->
					<view class="snap-up-goods-box" v-for="(item, index) in aBulkList" :key="index"
						@tap="toAbulkListPage" :data-groupactivityid="item.groupActivityId" :data-prodid="item.prodId">
						<view class="img-box">
							<image :src="item.prodPic"></image>
						</view>
						<view class="purchase-conditions">
							<view class="group-number">{{item.groupNumber}}{{i18n.join}}</view>
							<view class="snap-up-price"><text class="symbol">￥</text>{{wxs.toPrice(item.actPrice)}}
							</view>
						</view>
						<view class="original-price">￥{{wxs.toPrice(item.price)}}</view>
					</view>
					<!-- 查看更多 -->
					<view class="view-more" @tap="toAbulkPage" v-if="aBulkList.length > 3">{{i18n.seeMore}}
						<image class="view-more-icon" src="/static/images/icon/more-icon.png"></image>
					</view>
				</view>

			</view>
			<!-- 团购end -->

			<!-- 商城热卖 -->
			<view class="goods-list">
				<view class="title">
					<text>{{i18n.hotSale}}</text>
				</view>
				<view class="goods-item-cont">
					<block v-for="(prod, prodId) in hotSalesList" :key="prodId">
						<view class="prod-items" @tap="toProdPage" :data-prodid="prod.prodId">
							<view class="goods-item-imagecont">
								<image :src="prod.pic" class="goods-item-img"></image>
							</view>
							<view class="goods-item-text">
								<view class="goods-item-prod-text">{{prod.prodName}}</view>
								<view class="prod-info">{{prod.brief}}</view>
								<view class="prod-text-info">
									<view class="price">
										<text class="symbol">￥</text>
										<text class="big-num">{{wxs.parsePrice(prod.price)[0]}}</text>
										<text class="small-num">.{{wxs.parsePrice(prod.price)[1]}}</text>
									</view>
								</view>
							</view>
						</view>
					</block>
					<view class="tips" v-if="current == pages && current>1">{{i18n.allLoaded}}</view>
				</view>
			</view>

			<!-- 回到顶部 -->
			<back-top-btn v-if="showBacktop"></back-top-btn>

		</view>
		<view v-if="renovationId">
			<feature ref="featureIndex" @pageLoaded="pageLoaded" :pageLoad="pageLoad" :pageId="renovationId" :shopId="0"
				:pageScorllTop="pageScorllTop"></feature>
		</view>
	</view>
</template>

<script module="wxs" lang="wxs" src="../../wxs/number.wxs"></script>

<script>
	//index.js
	//获取应用实例
	var http = require("../../utils/http.js");
	var config = require("../../utils/config.js");
	var util = require("../../utils/util.js");
	const app = getApp().globalData;
	import backTopBtn from "../../components/backTopBtn/backTopBtn";
	import feature from '../../components/feature/index/index.vue'
	// const updateManager = wx.getUpdateManager();

	export default {
		data() {
			return {
				pictureDomain: config.pictureDomain,
				indicatorDots: true,
				indicatorColor: '#d1e5fb',
				indicatorActiveColor: '#1b7dec',
				autoplay: true,
				interval: 3000,
				duration: 1000,
				indexImgs: [{
					prodId: 2680,
					imgUrl: config.pictureDomain + 'home-banner-3.png'
				}, {
					prodId: 2669,
					imgUrl: config.pictureDomain + 'home-banner-1.png'
				}, {
					prodId: 3010,
					imgUrl: config.pictureDomain + 'home-banner-2.png'
				}],
				seq: 0,
				news: [],
				hotSalesList: [],
				sts: 0,
				current: 1,
				sort: 1,
				isAll: false,
				snapUpList: [],
				//秒杀列表
				aBulkList: [], //团购列表
				pages: "",
				scrollTop: "",
				showBacktop: false,


				// 装修
				pageLoad: false,
				renovationId: '', // 页面id
				shopId: '',
				pageScorllTop: 0, // 页面滚动距离
				platformHomePage: '',
				uniLoginLogoImg: "", // Logo
				showScreen: true, // 骨架屏的显隐
			};
		},

		components: {
			backTopBtn,
			feature
		},
		props: {},
		onLoad: function() {
			uni.showNavigationBarLoading()
			util.transTabbar();
			http.request({
				url: '/shopRenovation/getHomePage',
				method: 'GET',
				callBack: res => {
					console.log(res)
					if (res.homeStatus === 1) {
						this.renovationId = res.renovationId
						this.shopId = res.shopId
					} else {
						this.getAllData();
						uni.setNavigationBarTitle({
							title: this.i18n.yamiMultiStore
						});
					}
					this.showScreen = false;
					uni.hideNavigationBarLoading()
				}
			})

			this.getUniWebConfig(); //初始加载获取配置
		},
		computed: {
			i18n() {
				return this.$t('index')
			}
		},
		onShow: function() {
			// uni.setNavigationBarTitle({
			// 	title: this.i18n.yamiMultiStore
			// });

			// #ifndef H5
			var logData = uni.getStorageSync('flowAnalysisLogDto')
			uni.setStorageSync('step', uni.getStorageSync('step') / 1 + 1)
			if (logData && logData.pageId != 1 || uni.getStorageSync('step') == 1) {
				logData.pageId = 1
				logData.step = uni.getStorageSync('step')
				uni.setStorageSync('flowAnalysisLogDto', logData)
				http.saveLog(logData, 1)
			}
			// #endif
			http.getCartCount(); //重新计算购物车总数量
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			this.getNextPage();
		},
		onPullDownRefresh: function() {
			// uni.showNavigationBarLoading() //在标题栏中显示加载
			//模拟加载
			var ths = this;
			this.setData({ //下拉刷新
				current: 1
			})
			setTimeout(function() {
				ths.refresh()
				// ths.getAllData(); 
				// uni.hideNavigationBarLoading() //完成停止加载

				wx.stopPullDownRefresh(); //停止下拉刷新
			}, 100);
		},
		onShareAppMessage: function(e) {
			return {
				path: "pages/index/index"
			};
		},

		// 页面滚动到指定位置指定元素固定在顶部
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop
			this.pageScorllTop = e.scrollTop
			if (this.scrollTop > 800) {
				this.setData({
					showBacktop: true
				})
			} else if (this.scrollTop < 800) {
				this.setData({
					showBacktop: false
				})
			}
		},

		methods: {
			uniAppShare() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 1,
					summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			//刷新jiazai
			refresh() {
				uni.showNavigationBarLoading()
				util.transTabbar();
				this.renovationId = ''
				http.request({
					url: '/shopRenovation/getHomePage',
					method: 'GET',
					callBack: res => {
						console.log(res.homeStatus === 1)
						if (res.homeStatus === 1) {
							this.renovationId = res.renovationId
							this.shopId = res.shopId
						} else {
							console.log(!this.renovationId)
							console.log(this.renovationId)
							this.getAllData();
							uni.setNavigationBarTitle({
								title: this.i18n.yamiMultiStore
							});
						}
						this.showScreen = false;
						uni.hideNavigationBarLoading()
					}
				})

				this.getUniWebConfig(); //初始加载获取配置
			},
			//跳转到提报页面
			toTibao() {
				if (uni.getStorageSync('tbToken')) {
					uni.navigateTo({
						url: '/pages/tibao/list'
					})
				} else {
					uni.navigateTo({
						url: '/pages/tibao/register'
					})
				}

			},
			/**
			 * 获取uni-app相关配置
			 */
			getUniWebConfig: function() {
				var params = {
					url: "/webConfig/getUniWebConfig",
					method: "GET",
					data: {},
					callBack: res => {
						this.setData({
							uniLoginLogoImg: res.uniLoginLogoImg
						});
						uni.setStorageSync("uniLoginLogoImg", this.uniLoginLogoImg)
					}
				};
				http.request(params);
			},

			// 页面加载回调
			pageLoaded(e) {
				uni.setNavigationBarTitle({
					title: e.detail.title
				})
				// this.pageLoaded = false
				setTimeout(() => {
					uni.hideLoading()
					// this.pageLoaded = true
				}, 1)
			},

			/**
			 * 跳转到商品详情页
			 */
			toProdPage: function(e) {
				util.tapLog(3)
				var prodid = e.currentTarget.dataset.prodid;
				if (prodid) {
					this.$Router.push({
						path: '/packageProduct/pages/prod/prod',
						query: {
							prodid: prodid
						}
					})
				}
			},
			// 点击轮播图跳转相应页面
			toIndexImgContent: function(item) {
				util.tapLog(3)
				if (item.type !== 0) {
					return
				}
				let prodId = item.relation
				http.request({
					url: '/prod/isStatus',
					method: 'GET',
					data: {
						prodId: prodId
					},
					callBack: res => {
						if (res) {
							this.$Router.push({
								path: '/packageProduct/pages/prod/prod',
								query: {
									prodid: prodId,
									bannerEnter: '1'
								}
							})
						}
					}
				})
			},
			toCouponCenter: function() {
				util.checkAuthInfo(() => {
					uni.navigateTo({
						url: '/packageActivities/pages/couponCenter/couponCenter'
					})
				})
			},

			/**
			 * 跳转到直播列表
			 */
			// toLiveListPage: function() {
			// 	util.tapLog(3)
			// 	uni.navigateTo({
			// 		url: '/pages/liveBroadcast/liveBroadcast',
			// 	})
			// },

			/**
			 * 秒杀
			 */
			getSnapUpList: function() {
				uni.showLoading();
				var params = {
					url: "/seckill/pageProd",
					method: "GET",
					data: {
						size: 20
					},
					callBack: res => {
						uni.hideLoading();
						let result = res.records.filter(item => util.dateToTimestamp(item.endTime) > new Date()
							.getTime()); //过滤掉秒杀时间已结束的商品

						this.setData({
							snapUpList: result
						});
					}
				};
				http.request(params);
			},

			/**
			 * 跳转秒杀列表页
			 */
			toSnapUpPage: function() {
				util.tapLog(3)
				uni.navigateTo({
					url: '/packageActivities/pages/snapUpList/snapUpList'
				});
			},
			toSnapUpListPage: function(e) {
				util.tapLog(3)
				var seckillId = e.currentTarget.dataset.seckillid;
				// uni.navigateTo({
				//   url: "/pages/snapUpDetail/snapUpDetail?seckillId=" + seckillId
				// });
				this.$Router.push({
					path: '/packageActivities/pages/snapUpDetail/snapUpDetail',
					query: {
						seckillId: seckillId
					}
				})
			},

			/**
			 * 团购
			 */
			getAbulk: function() {
				uni.showLoading();
				var param = {
					url: "/groupProd/indexList",
					method: "GET",
					data: {},
					callBack: res => {
						uni.hideLoading();
						this.setData({
							aBulkList: res
						});
					}
				};
				http.request(param);
			},
			/**
			 * 跳转协同采购列表页
			 */
			toCoordinaPage() {
				util.checkAuthInfo(() => {
					uni.navigateTo({
						url: '/packageCoordination/pages/list/index'
					});
				})

			},
			/**
			 * 跳转团购列表页
			 */
			toAbulkPage: function() {
				util.tapLog(3)
				uni.navigateTo({
					url: '/packageActivities/pages/aBulkList/aBulkList'
				});
			},
			toAbulkListPage: function(e) {
				util.tapLog(3)
				var prodId = e.currentTarget.dataset.prodid;
				var groupActivityId = e.currentTarget.dataset.groupactivityid;
				this.$Router.push({
					path: '/packageProduct/pages/prod/prod',
					query: {
						prodid: prodId,
						groupActivityId: groupActivityId
					}
				})
			},
			// 跳转搜索页
			toSearchPage: function() {
				util.tapLog(3)
				uni.navigateTo({
					url: '/pages/search-page/search-page'
				});
			},
			//跳转商品活动页面
			toClassifyPage: function(e) {
				util.tapLog(3)
				var url = '/packageUser/pages/prod-classify/prod-classify?sts=' + e.currentTarget.dataset.sts;
				var id = e.currentTarget.dataset.id;
				var title = e.currentTarget.dataset.title;

				if (id) {
					url += "&tagid=" + id + "&title=" + title;
				}

				uni.navigateTo({
					url: url
				});
			},
			toSecKillPage: function() {
				uni.navigateTo({
					url: '/packageActivities/pages/snapUpList/snapUpList'
				});
			},
			toSpecialDiscount: function() {
				this.$Router.push('/packageActivities/pages/specialDiscount/specialDiscount')
			},
			//跳转公告列表页面
			onNewsPage: function() {
				uni.navigateTo({
					url: '/packageUser/pages/recent-news/recent-news'
				});
			},

			getAllData() {
				uni.showLoading();
				// http.getCartCount(); //重新计算购物车总数量
				//this.getIndexImgs();
				this.getNoticeList();
				this.getHotSalesProds();
				this.getSnapUpList();
				this.getAbulk();
			},

			//加载轮播图
			getIndexImgs() {
				//加载轮播图
				var params = {
					url: "/indexImgs/0",
					method: "GET",
					data: {},
					callBack: res => {
						this.setData({
							indexImgs: res,
							seq: res
						});
						uni.hideLoading();
					}
				};
				http.request(params);
			},

			getNoticeList() {
				// 加载公告
				var params = {
					url: "/shop/notice/topNoticeList/0",
					method: "GET",
					data: {},
					callBack: res => {
						this.setData({
							news: res
						});
						uni.hideLoading();
					}
				};
				http.request(params);
			},

			/**
			 * 加载热销商品列表
			 */
			getHotSalesProds() {
				uni.showLoading();
				var param = {
					url: "/search/searchProdPage",
					method: "GET",
					data: {
						current: this.current,
						size: 20,
						sort: 1,
						orderBy: 1
					},
					callBack: res => {
						uni.hideLoading();
						var hotSalesList = [];

						if (this.current == 1) {
							this.setData({
								hotSalesList: res.records,
								pages: res.pages,
								current: res.current
							});
						} else {
							hotSalesList = this.hotSalesList;
							hotSalesList.push(...res.records);
							this.setData({
								hotSalesList
							});
						}
					}
				};
				http.request(param);
			},

			// 触底加载下一页
			getNextPage() {
				if (this.pages > this.current) {
					this.setData({
						current: this.current + 1
					});
					this.getHotSalesProds();
				} else {
					this.setData({
						isAll: true
					});
				}
			}

		}
	};
</script>
<style lang="scss">
	page {
		background: #f7f7f7;
		height: auto;
	}

	.index-outer-wrapper {

		/* 骨架屏 */
		.screen-wrapper {
			position: fixed;
			z-index: 1000;
			width: 100%;
			height: 100vh;
			top: 0;
			background-color: #FFFFFF;


			.screen-bg-sear {
				height: 80rpx;
				/* z-index: 1; */
				border-radius: 50rpx;
				width: 100%;
				margin: 20rpx 0;
				/* padding: 0 20rpx; */
				background-color: #EEEEEE;
				display: block;
				align-items: center;
			}

			.screen-swiper {
				width: 100%;
				height: 300rpx;
				overflow: hidden;
				margin-top: 40rpx;
				background-color: #EEEEEE;
			}

			.screen-cat-item {
				display: flex;
				justify-content: space-between;
				background: #fff;
				padding: 20rpx 10rpx 30rpx;

				.item {
					text-align: center;
					/* width: 25%; */
					width: 120rpx;
					height: 120rpx;
					border-radius: 60rpx;
					background-color: #EEEEEE;
					display: flex;
					flex-direction: column;
					margin: auto;
					align-items: center;
				}
			}

			.screen-more {
				width: 100%;
				height: 200rpx;
				margin-top: 10rpx;
				margin-bottom: 40rpx;
				background-color: #EEEEEE;
			}
		}

		/* 骨架屏end */
		.container {
			.bg-sear {
				position: fixed;
				z-index: 999;
				width: 100%;
				line-height: 56rpx;
				background: #fff;
				padding: 20rpx 0;
				text-align: center;
				top: 0;

				.section {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 70rpx;
					background: #fff;
					z-index: 1;
					border-radius: 50rpx;
					width: 92%;
					margin: auto;
					left: 4%;
					background: #eeeeee;

					.placeholder {
						display: block;
						font-size: 28rpx;
						color: #999;
					}

					.search-img {
						width: 32rpx;
						height: 32rpx;
						margin-right: 10rpx;
					}
				}
			}

			.content-wrapper {
				background: #fff;

				/* 轮播图及搜索框 */
				.swiper-wrapper {
					width: 100%;
					height: 400rpx;
					overflow: hidden;
					margin-top: 110rpx;


					&.pic-swiper {
						margin-top: 101rpx;
						padding: 10rpx 0;
						background: #fff;
						height: 400rpx;
					}

					.banner-item {
						font-size: 26rpx;
						box-sizing: border-box;

						.img-box {
							font-size: 0;

							width: 100%;
							height: 100%;
							box-sizing: border-box;
							padding: 20rpx 10rpx;

							.banner {
								border-radius: 8rpx;
								position: absolute;
								width: 690rpx;
								margin: 0 10rpx;
								height: 388rpx;
								border-radius: 8rpx;
								display: inline-block;
								box-shadow: 0 4px 10px 0 rgba(83, 83, 83, 0.288);
							}

						}
					}
				}

				/* 分类栏目 */
				.cat-item {
					display: flex;
					justify-content: space-between;
					background: #fff;
					padding: 20rpx 10rpx 30rpx;

					.item {
						text-align: center;
						width: 25%;
						display: flex;
						flex-direction: column;
						margin: auto;
						align-items: center;

						image {
							width: 86rpx;
							height: 86rpx;
						}

						text {
							font-size: 28rpx;
							margin-top: 20rpx;
						}
					}
				}

				/* 消息播放 */
				.message-play {
					position: relative;
					height: 90rpx;
					background: #fff;
					margin: auto;
					padding: 0 60rpx 0 100rpx;
					box-sizing: border-box;
					border-top: 1px solid #f9f9f9;

					.hornpng {
						width: 77rpx;
						height: 36rpx;
						position: absolute;
						left: 20rpx;
						top: 27rpx;
						margin-right: 8rpx;
					}

					.swiper-cont {
						height: 90rpx;
						line-height: 90rpx;
						margin-top: 0;

						.items {
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
							text-align: left;
						}
					}


					.arrow {
						width: 15rpx;
						height: 15rpx;
						border-top: 3rpx solid #686868;
						border-right: 3rpx solid #686868;
						transform: rotate(45deg);
						position: absolute;
						right: 30rpx;
						top: 34rpx;
					}
				}
			}

			/* 直播列表入口 */
			// .live-enter {
			// 	display: block;
			// 	width: 100%;
			// 	height: 250rpx;
			// 	padding: 10rpx;
			// 	padding-top: 20rpx;
			// 	box-sizing: border-box;

			// 	image {
			// 		display: block;
			// 		width: 100%;
			// 		height: 100%;
			// 	}
			// }

			/* 秒杀 */
			.snap-up,
			.abulk {
				margin-top: 20rpx;
				padding: 0 20rpx;


				.more-icon>image,
				.img-box>image {
					width: 100%;
					height: 100%;
				}

				.snap-up-head {
					padding: 20rpx;
					padding-bottom: 10rpx;
				}

				.snap-up-tit {
					font-size: 32rpx;
					font-weight: bold;
				}

				.snap-up-time {
					padding: 5rpx 10rpx;
					padding-right: 1rpx;
					font-size: 24rpx;
					background: red;
					border-radius: 30rpx;
					margin: 0 15rpx;
				}

				.white {
					color: white;
				}

				.snap-up-countdown {
					margin-right: 2rpx;
					margin-left: 10rpx;
					background: #fff;
					color: red;
					border-radius: 0 15rpx 15rpx 0;
					padding: 5rpx 10rpx 0 8rpx;
				}

				.snap-up-time {
					display: inline-block;
				}

				.more-goods {
					float: right;
					font-size: 25rpx;
					color: #777;
					padding-top: 0.5em;
					line-height: 1em;
					display: flex;

				}

				.more-goods-txt {
					vertical-align: middle;
					color: #aaa;
				}

				.more-icon {
					display: inline-block;
					width: 20rpx;
					height: 20rpx;
					vertical-align: middle;
					padding-left: 5rpx;
				}

				/* 列表 */
				.snap-up-goods-show {
					box-sizing: border-box;
					padding: 20rpx;
					width: 100%;
					height: auto;
					overflow-y: hidden;
					overflow-x: auto;
					white-space: nowrap;
					background: #fff;
					border-radius: 10rpx;
					margin-top: 10rpx;
				}

				.snap-up-goods-show::-webkit-scrollbar {
					display: none;
				}

				.snap-up-goods-box {
					position: relative;
					display: inline-block;
					text-align: center;
					margin-right: 20rpx;
					overflow: -moz-scrollbars-none;
					scrollbar-width: none;
				}

				.snap-up-goods-box .img-box {
					display: block;
					width: 210rpx;
					height: 210rpx;
					font-size: 0;
				}

				.purchase-conditions {
					margin-top: 10rpx;
					line-height: 1.5em;
				}

				.group-number {
					font-size: 18rpx;
					color: white;
					background: #e43130;
					padding: 6rpx 12rpx;
					border-radius: 20rpx;
					line-height: 20rpx;
					position: absolute;
					top: 10rpx;
					left: 10rpx;
				}

				.snap-up-price {
					display: inline-block;
					font-size: 28rpx;
					color: #e43130;
					line-height: 1.5em;
					text-align: center;
					padding-top: 8rpx;
					font-family: arial;
				}

				.snap-up-price .symbol {
					font-size: 24rpx;
				}

				.original-price {
					text-align: center;
					font-size: 25rpx;
					line-height: 1em;
					color: #999;
					text-decoration: line-through;
				}

				/* 查看更多 */
				.view-more {
					display: inline-block;
					width: 30rpx;
					padding: 0 10rpx;
					height: 146px;
					line-height: 30rpx;
					writing-mode: vertical-lr;
					font-size: 23rpx;
					color: #888;
					background: #eee;
					vertical-align: top;
					text-align: center;
					letter-spacing: 3px;


					.view-more-icon {
						display: inline-block;
						width: 20rpx;
						height: 20rpx;
						text-align: center;
						vertical-align: middle;
						margin-right: 9rpx;
					}
				}

			}

			/* 清除浮动 */
			.clearfix:after {
				content: ".";
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
			}

			/* 商城热卖&更多宝贝 */
			.goods-list {
				margin-top: 20rpx;

				.title {
					padding: 0 12px;
					height: 36px;
					line-height: 36px;
					font-weight: bold;
				}

				.prod-items {
					width: 345rpx;
					display: inline-block;
					background: #fff;
					padding: 20rpx;
					box-sizing: border-box;
					margin-left: 20rpx;
					margin-bottom: 20rpx;
					border-radius: 10rpx;

					.goods-item-imagecont {
						font-size: 0;
						text-align: center;
						width: 305rpx;
						height: 305rpx;

						.goods-item-img {
							margin-top: 20rpx;
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
						}
					}

					.goods-item-text {
						.goods-item-prod-text {
							font-size: 28rpx;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							/* 固定行数：2行  */
							-webkit-box-orient: vertical;
							/* 方向：垂直  */
							word-break: break-all;
							/* word-break换行方式：break-all允许在单词内换行  */
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.prod-info {
							font-size: 24rpx;
							color: #888888;
							line-height: 1em;
							margin-top: 10rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							height: 24rpx;
						}

						.prod-text-info {
							position: relative;
							height: 40rpx;
							line-height: 40rpx;
							font-family: Arial;
							margin-top: 20rpx;
							text-align: right;
						}
					}

				}

				.tips {
					margin-top: 50rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					color: #999;
					font-size: 24rpx;
				}
			}

		}
	}
</style>
